<script setup>
import {
    UserFilled,
    User,
    EditPen,
    ShoppingCart,
    Location,
    ShoppingBag,
} from "@element-plus/icons-vue";
</script>

<template>
    <el-aside class="aside">
        <div class="aside-main">
            <el-menu :default-active="this.$router.path" router>
                <el-sub-menu>
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="/user/info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/user/address"
                        ><el-icon><Location /></el-icon> 收货地址</el-menu-item
                    >
                    <el-menu-item index="/user/resetPassWord">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>修改密码</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item index="/cart">
                    <el-icon><ShoppingCart /></el-icon>
                    购物车管理</el-menu-item
                >
                <el-menu-item index="/order"
                    ><el-icon><ShoppingBag /></el-icon>订单管理</el-menu-item
                >
            </el-menu>
        </div>
    </el-aside>
</template>

<style scoped>
.aside {
    padding: 20px;
}
.aside-main {
    box-shadow: 0 0 10px #ccc;
    border-radius: 15px;
    padding: 20px;
}
</style>
